<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.real_name" placeholder="姓名" style="width: 200px;;margin-top:8px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.is_paid" placeholder="还款状态" class="filter-item" style="width: 150px;margin-top:8px;">
        <el-option label="所有" value="10" />
        <el-option label="未还款" value="3" />
        <el-option label="已还款" value="1" />
        <el-option label="部分还款" value="2" />
      </el-select>
      <el-select v-model="listQuery.collector_id" placeholder="选择催收员" filterable class="filter-item" style="width:130px;margin-top:8px">
        <el-option label="选择催收员" value="" />
        <el-option
          v-for="item in collector"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-date-picker v-model="listQuery.date" style="width:150px;" format="yyyy-MM-dd" type="datetime" placeholder="还款日期" />
      <el-date-picker v-model="listQuery.date_end" style="width:150px;" format="yyyy-MM-dd" type="datetime" placeholder="截止日期" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-top:8px;">
        查询
      </el-button>
      <!-- <el-button v-waves class="filter-item" type="primary"  style="margin-top:8px;" @click="tipsByAdmin(0,2)">
        批量提醒
      </el-button> -->
    </div>
    <el-row style="margin-top:-10px;font-size:14px;color:#666">
      <el-col :span="2" style="font-weight:600">合计：</el-col>
      <el-col :span="5">已还金额：{{sum.paid_money}}</el-col>
      <el-col :span="5">未还金额：{{sum.no_paid_money}}</el-col>
    </el-row>
    <el-table :key="tableKey" v-loading="listLoading"  :data="list" size="mini" border fit highlight-current-row style="width: 100%;margin-top:10px" :default-sort = "{prop: 'collector_name', order: 'descending'}">
      <!-- <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column> -->
      
      <el-table-column type="selection" width="45" align="center" :selectable="selectabledFun"></el-table-column>
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}" >
           <el-dropdown :hide-on-click="false" >
            <span class="el-dropdown-link" style="color:#67C23A">
              更多操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="tipsByAdmin(row.order_id,1)" v-if="row.is_paid!=1">提醒还款</el-button>
              </el-dropdown-item>
              <!-- <el-dropdown-item>
                <el-button size="mini" type="danger" @click="record(row.order_id)">催收记录</el-button>
              </el-dropdown-item> -->
              <el-dropdown-item>
                <el-button size="mini" type="success" @click="plan(row.order_id)">还款计划</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="info" @click="detail(row.order_id)">订单详情</el-button>
              </el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center" width="120" >
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" class-name="status-col" width="60">
        <template slot-scope="{row}">
          <span v-if="row.is_paid==1">已还</span>
          <span v-if="row.is_paid==0" style="color:#aaa">未还</span>
          <span v-if="row.is_paid==2" >未还</span>
        </template>
      </el-table-column>
      <el-table-column label="公众号" align="center" width="70">
        <template slot-scope="{row}">
          <span v-if="row.openid!=''">已关注</span>
          <span v-if="row.openid==''" style="color:#aaa">未关注</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center" width="110">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="签单人" class-name="status-col" width="70">
        <template slot-scope="{row}">
          {{ row.sale_name}}
        </template>
      </el-table-column>
      <el-table-column label="催收人员" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.collector_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" width="260">
        <template slot-scope="{row}">
          <span>{{ row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模式" align="center" width="60">
        <template slot-scope="{row}">
          <span v-if="row.factoring_model==1">正常</span>
          <span v-if="row.factoring_model==2">买断</span>
          <span v-if="row.factoring_model==3">绿通</span>
        </template>
      </el-table-column>
      <el-table-column label="项目金额" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期数" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本期期数" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本期金额" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.now_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本期已还金额" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.paid_money }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="已还期数" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.num-1 }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="未还期数" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.total_period-row.num+1 }}</span>
        </template>
      </el-table-column> --> 
      <!-- <el-table-column label="已还金额" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未还金额" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column> -->
      
      <el-table-column label="本期还款日" class-name="status-col" width="100">
        <template slot-scope="{row}">
          {{ row.time_date}}
        </template>
      </el-table-column>
      
      <!-- <el-table-column label="签单人" class-name="status-col" width="80">
        <template slot-scope="{row}">
          {{ row.sale_name}}
        </template>
      </el-table-column> -->
      
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :visible.sync="dialogPlanAble" class="abow_dialog" title="还款计划"  width="1050px" >
          <el-table  :key="tableKey" v-loading="listLoading" :data="plan_list" :row-class-name="tableRowClassName" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="客户姓名" align="center" width="180" >
              <template slot-scope="{row}">
                <span>{{ orderinfo.real_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="期数" align="center" width="60" >
              <template slot-scope="{row}">
                <span>{{ row.num }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应还日期" align="center" width="120" >
              <template slot-scope="{row}">
                <span>{{ row.time_date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应还金额" align="center" width="120" >
              <template slot-scope="{row}">
                <span>{{ row.total_money }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="利息" align="center" width="110" >
              <template slot-scope="{row}">
                <span>{{ row.money_rate }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="滞纳金" align="center" width="80" >
              <template slot-scope="{row}">
                <span>{{ row.late_fee }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实还金额" align="center" width="120" >
              <template slot-scope="{row}">
                <span>{{ row.paid_money }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实还日期" align="center" width="180" >
              <template slot-scope="{row}">
                <span v-if="row.paid_date!=0">{{ row.sh_time }}</span>
              </template>
            </el-table-column>
            
            <el-table-column label="还款状态" class-name="status-col" >
              <template slot-scope="{row}">
                {{ row.status_name}}
              </template>
            </el-table-column>
          </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getSystemAdminList,
    getOrderPaymentNormalList,
    setOrderCollectionMember,
    sendTipsByAdmin
  } from '@/api/collection'
   import {
    paymentList
  } from '@/api/finance'
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import {
    getAllList
  } from '@/api/user'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'NormalTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)

        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    
    data() {
      return {
         action: process.env.VUE_APP_BASE_API + 'upload/file',
         myHeaders: {
           token: this.$store.getters.token
         },
        tableKey: 0,
        tableRecord: 1,
        list: null,
        status_filters:[{ text: '已还', value: '1' }, { text: '未还', value: '1,2' }],
        order_ids:[],
        listRecordLoading: true,
        recordTotal: 0,
        total: 0,
        plan_list:[],
        dialogPlanAble:false,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          real_name: '',
          mobile: '',
          idcard: '',
          is_paid: '',
          status:'',
          date:'',
          collector_id:'',
          date_end:''
        },
        listRecordQuery: {
          page: 1,
          limit: 20,
          order_id: ''
        },
        listCollectorQuery: {
          role_id: 8,
          page: 1,
          limit: 10
        },
        system_admin_list:[],
        temp: {

          collection_id: null
        },
        sum:[],
         order_id:0,
         dialogFormVisible:false,
        dialogRecordVisible: false,
        dialogStatus: '',
        downloadLoading: false,
        collector:[],
        rules: {
          collection_id: [{
            required: true,
            message: '催收人员必须设置',
            trigger: 'blur'
          }]
         }
      }
    },
  created() {
    this.cacheQueryFormat();
    this.getList();
    this.getCollectorList();
    //添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    //添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      //刷新页面事件
      sessionStorage.removeItem('normal');
    },
    cacheQueryFormat(){
      let cacheQuery = sessionStorage.getItem('normal');
      if(cacheQuery){
        this.listQuery = JSON.parse(cacheQuery);
      }
    },
    getList() {
      sessionStorage.setItem('normal',JSON.stringify(this.listQuery))
      this.listLoading = true
      getOrderPaymentNormalList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.sum = response.data.sum
        //this.sale_list = response.data.sale
        setTimeout(() => {
          this.listLoading = false
        }, 1.0 * 200)
      })
    },
    selectabledFun(row,index){
        if(row.openid!=''&&row.is_paid!=1){
          return true;
        }
        return false;
    },
    getCollectorList() {
      getAllList(this.listCollectorQuery).then(response => {
        this.collector = response.data
      })
    },
    plan(order_id){
      this.dialogPlanAble = true;
      let param = {order_id:order_id};
      paymentList(param).then(response => {
        this.plan_list = response.data.list
        this.orderinfo = response.data.order
        this.listLoading = false
      })
    },
    detail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    tipsByAdmin(order_id,lab){
      let pam = {};
      if(lab==1){
        pam.order_ids = [order_id];
      }else{
        if(this.order_ids.length==0){
          this.$notify({
            title: '提示',
            message: '请勾选订单',
            type: 'error',
            duration: 2000
          })
        }
        pam.order_ids = this.order_ids;
      }
      //console.log(1234);return;
      sendTipsByAdmin(pam).then(response => {
          this.$notify({
            title: '提示',
            message: '已发送',
            type: 'success',
            duration: 2000
          })
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.s == 1) {
        return 'success-row';
      } else if (row.s == 2) {
        //return 'warning-row';
      }
      return '';
    },
    handleSelectionChange(val) {
        for(let i=0;i<val.length;i++){
          this.order_ids.push(val[i].order_id);
        }
    },
    statusTag(value, row) {
        this.listQuery.status = value;
        console.log(value)
        console.log(row)
        //this.getList()
    },
    payment(order_id) {
      this.$router.push('payment/' + order_id)
    },


 setOrderCollectionMember(row){
         this.order_id=row.order_id

         getSystemAdminList().then(resp=>{
           this.system_admin_list=resp.data
           this.dialogFormVisible=true
         })
         this.$nextTick(() => {
           this.$refs['dataForm'].clearValidate()
         })
 },
 setData(){
   this.$refs['dataForm'].validate((valid) => {
     if (valid) {
       setOrderCollectionMember(this.order_id,this.temp).then(() => {

         this.dialogFormVisible = false
         this.$notify({
           title: 'Success',
           message: 'Created Successfully',
           type: 'success',
           duration: 2000,
           onClose: this.getList()
         })
       })
     }
   })

 },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

  }
}
</script>

<style>
.collectcss{margin-top:7px;color:#999;font-size:12px}
.el-table .warning-row {
      background: orangered;
    }

  .el-table .success-row {
    background: #98dd72;
  }
</style>
